<template>
    <!-- 企业加速计划 -->
    <div id="experience" class="experience" data-aos="fade-up" data-aos-delay="300">
        <div class="title">
            <h3>企业加速计划</h3>
            <p>经过专业评审，从每期报名的企业中挑选20家进行AI加速，提供AI算力支撑、调度优化、数据处理、<br>
                模型训练等AI基础设施服务，在数字化转型之路上，为企业按下加速键。</p>
        </div>
        <div class="formBox">
            <el-form ref="ruleFormRef" :rules="rules" label-position="left" label-width="auto" :model="formLabelAlign"
                style="width: 50%;">
                <el-form-item label="您的姓名" prop="a">
                    <el-input v-model="formLabelAlign.a" />
                </el-form-item>
                <el-form-item label="您的邮箱" prop="b">
                    <el-input v-model="formLabelAlign.b" />
                </el-form-item>
                <el-form-item label="您的公司名称" prop="c">
                    <el-input v-model="formLabelAlign.c" />
                </el-form-item>
            </el-form>
        </div>
        <div class="file">
            <p>请上传您公司的“商业计划书”(Business Plan)资料</p>
            <div class="btnBox">
                <el-upload ref="upload" v-model:file-list="fileList" class="upload-demo" :auto-upload="false">
                    <template #trigger>
                        <el-button type="success">选择文件</el-button>
                    </template>
                </el-upload>
            </div>
        </div>
        <div class="submit">
            <el-button color="#19286d" @click="submit(ruleFormRef)">提交</el-button>
        </div>
    </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue';
let fileList = ref([])
let formLabelAlign = reactive({
    a: '',
    b: '',
    c: '',
})
const ruleFormRef = ref();
let rules = {
    a: [
        {
            required: true,
            message: "请输入您的姓名",
            trigger: "blur",
        },
    ],
    b: [
        {
            required: true,
            message: "请输入您的邮箱",
            trigger: "blur",
        },
    ],
    c: [
        {
            required: true,
            message: "请输入您的公司名称",
            trigger: "blur",
        },
    ],
};
const upload = ref()
// 提交按钮
const submit = (ruleFormRef) => {
    ruleFormRef.validate((valid) => {
        if (valid) {

        } else {
            return false;
        }
    });
}
// 文件上传
const submitUpload = () => {
    console.log(fileList.value);
}
</script>

<style scoped lang="scss">
        .experience {
            width: 100%;
            margin-top: 150px;
            padding: 80px 0;
            box-sizing: border-box;
            background: url(../assets/images/lightNet/9418ca1af3c2b78d3746e803dbc688aa_.jpg) no-repeat center center/cover;
            // background-size: 100%;
            border-radius: 10px;


            .title {
                text-align: center;
                margin-bottom: 60px;
                letter-spacing: 3px;
                color: #fff;

                h3 {
                    display: inline;
                    font-size: 28px;
                    font-weight: 600;
                }

                p {
                    font-size: 13px;
                    margin-top: 20px;
                    line-height: 20px;
                }
            }

            .formBox {
                width: 80%;
                margin: 0 auto;
                display: flex;
                justify-content: space-around;
                align-items: center;

                ::v-deep .el-form-item__label {
                    color: #fff;
                }
            }

            .file {
                margin: 20px auto 0 auto;
                display: flex;
                justify-content: center;
                align-items: center;
                color: #fff;
                font-size: 14px;

                .btnBox {
                    margin-left: 20px;

                    .ml-3 {
                        margin-left: 10px;
                    }

                    button {
                        font-size: 12px;
                        height: 25px;
                    }
                }
            }

            .submit {
                text-align: center;
                margin-top: 30px;

                button {
                    width: 100px;
                }
            }
        }
</style>
